<template>
    <div class="loginPage">
        <div class='logo'>
            <img src="../assets/image/logo_01.png" alt=""> 
        </div>
        <div class="form">
            <form @submit="submitHandle">
                <p class="login-item">
                    <i class='iconfont icon-shoujihao tubiao'></i>
                    <input type="text" v-model="login.username" placeholder="请输入账号" @focus="inputFocus">
                    </p>
                <p class="login-item">
                    <i class="iconfont icon-mima tubiao"></i>
                    <input type="password" v-model="login.password" placeholder="请输入密码" @focus="inputFocus">
                    </p>
                <p class="clearfix">
                    <router-link tag='span' to="/register" class="zhuce">立即注册</router-link>
                    <span class="changemima">忘记密码</span>
                </p>
                <p class="denglutishi">{{msgTip}}</p>
                <button @click="Onsubmit">登录</button>
            </form>
        </div> 
        <div class="login-footer">
            <div class="tip">
                其他登录方式
            </div>
            <div class="footer-logo">
                <i class="iconfont icon-weibo qqicon"></i>
                <i class="iconfont icon-qq qqicon"></i>
                <i class="iconfont icon-weixin qqicon"></i>
                
            </div>
        </div>
    </div>
</template>

<script>
import jwtDecode from 'jwt-decode'
export default {
    data() {
        return {
            login:{
                username:'',
                password:''
            },
            msgTip:''
        }
    },
    methods: {
        Onsubmit(){           
            this.api.Login(this.login).then(res=>{
                this.msgTip=res.data.msg
                if(res.data.success){
                    this.$store.commit('LOGIN_IN',JSON.stringify(jwtDecode(res.data.token)));
                    this.$store.commit('setIsLogin',true)
                    //跳转页面去登录页面
                    this.$router.replace('/home')
                }
            })
            
        },
        inputFocus(){
            this.msgTip=''
        },
        submitHandle(e){
            e.preventDefault();
        }
    },

}
</script>

<style lang="less" scoped>
.loginPage{
    @basecolor:#999;
    color: @basecolor;
    background: rgba(0,0,0,.9);
    height: 100%;
    font-size: 0.32rem;
    text-align: center;
    padding: 1rem 0 0;
    box-sizing: border-box;
    .logo{
        margin: 0.5rem auto;
        img{
            width: 2rem;
        }
    }
    .form{
        width: 70%;
        margin: 0 auto;
        input{
            
            letter-spacing: 3px;
            color:@basecolor;
            background: transparent;
            font-size: 0.4rem;
            padding-left: 1rem;
            margin-top: 0.02rem;
            
        }
        button{
            display: block;
            width: 100%;
            height: 1rem;
            margin: 0.2rem auto;
            border-radius: 0.5rem;
            background: rgb(254,217,6);
            font-size: 0.44rem;
            letter-spacing: 5px;
        }
        .login-item{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            margin: 0.3rem auto;
            border-bottom: 0.02rem solid @basecolor;
            position: relative;
            .tubiao{
                font-size: 0.8rem;
                color:rgb(254,217,6);
                position: absolute;
                left: 0;
                top: 0.03rem;
            }
            
        }
        .changemima{
            float: right;
            margin-bottom: 0.3rem;
        }
        .zhuce{
            float: left;
            margin-bottom: 0.3rem;

        }
        .denglutishi{
            color: #CC3300;
            height: 0.8rem;
            line-height: 0.8rem;
        }
        
    }
    .login-footer{
        width: 70%;
        margin: 0 auto;
        margin-top: 1.5rem;
        .tip{
            margin-bottom: 0.5rem;
            position: relative;
        }
        .tip::before,.tip::after{
            content: '';
            display: block;
            width: 1.5rem;
            height: 0;
            border: 1px solid @basecolor;
            position: absolute;
            top: 7px;
        }
        .tip::after{
            right: 0;
        }
        .footer-logo{
            text-align: left;
            
            .qqicon{
                font-size: 1rem;
                margin-left: 0.2rem;
                margin-right: 0.8rem;    
            }
        }
    }
}
</style>